<template>
  <div v-html="compiledMarkdown" class="markdown-content"></div>
</template>

<script setup lang="ts">
import {marked} from 'marked';
import {onMounted, ref} from "vue";
import request from "@/utils/request.ts";
import hljs from 'highlight.js';
import 'highlight.js/styles/googlecode.css'; // 引入 highlight.js 的样式

let props = defineProps({
  id: {
    type: Number,
    required: true,
  }
})
let compiledMarkdown = ref()
onMounted(async () => {
  const rendererMD = new marked.Renderer();
  marked.setOptions({
    renderer: rendererMD,
    highlight: function (code, language) {
      const validLanguage = hljs.getLanguage(language)
          ? language
          : "plaintext";
      return hljs.highlight(validLanguage, code).value;
    },
    pedantic: false,
    gfm: true,
    tables: true,
    breaks: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    xhtml: false,
  })
  await getData(props.id)
})
let parserData = ref()
const getData = async (id) => {
  let {data} = await request.get(`https://back.xuxiao888.com/post/${id}`)
  parserData.value = data[0].content
  compiledMarkdown.value = marked(parserData.value)
}
</script>

<style>
/* 这里你可以自定义 Markdown 的样式 */
.markdown-content {
  padding: 10px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* 代码块样式 */
.markdown-content pre {
  background-color: #f6f8fa;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
}

.markdown-content code {
  border-radius: 5px;
  margin: 1em 0;
  overflow-x: auto;
}

/* 标题样式 */
.markdown-content h2 {
  font-weight: bold;
  font-size: 1.75em;
  margin-top: 24px;
}

.markdown-content h3 {
  font-weight: bold;
  font-size: 1.5em;
  margin-top: 24px;
}

.markdown-content h4 {
  font-weight: bold;
  font-size: 1.25em;
  margin-top: 24px;
}

/* 列表样式 */
.markdown-content ul {
  list-style-type: disc;
  margin-left: 20px;
}

/* 粗体和斜体 */
.markdown-content strong {
  font-weight: bold;
}

.markdown-content em {
  font-style: italic;
}

.markdown-content p {
  font-size: 1.25em;
  text-indent: 2rem;
}

/*
 .markdown-content {
  padding: 16px 20px 32px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  line-height: 1.5;
  word-wrap: break-word;

}

.markdown-content h1 {
  color: #070707;
  font-size: 2em;

}

h2 {
  color: #030303;
  font-size: 1.75em;

}

h3 {
  color: #070707;
  font-size: 1.5em;
  margin: 15px 0 0;
}

h4 {
  color: #000000;
  font-size: 1.25em;

}

h5 {
  color: #000000;
  font-size: 1em;

}

h6 {
  color: #070707;
  font-size: 0.875em;

}


strong {
  font-weight: bold;
  color: #222;
}

strong {
  font-style: italic;
  color: #555;
}


a {
  color: #1e90ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


ul {
  list-style-type: disc;
  margin: 1em 0;
  padding-left: 20px;
}

ol {
  list-style-type: decimal;
  margin: 1em 0;
  padding-left: 20px;
}

li {
  margin: 0.5em 0;
}


img {
  max-width: 100%;
  height: auto;
  margin: 1em 0;
}


code {
  background: #f4f4f4;
  border-radius: 5px;
  margin: 1em 0;
  overflow-x: auto;
}

code {
  //background: #eee;
  background-color: #f6f8fa;
  //padding: 2px 5px;
  border-radius: 3px;
  color: #787878;
}


blockquote {
  border-left: 4px solid #ddd;
  padding: 0.5em 10px;
  color: #555;
  margin: 1em 0;
  background: #f9f9f9;
}

p {
  text-indent: 2rem !important;
}
 */

</style>
